<template>
  <div class="home">
    <van-nav-bar title="个人借款明细查询" left-text="返回" left-arrow @click-left="returnBtn">
      <template #right>
        <van-icon name="search" size="22" />
      </template>
    </van-nav-bar>
    <!-- <div class="tab-bu">当前单据状态：<span>{{ tebList[active].name }}</span>，共有<span>5</span>条记录</div> -->
    <ul class="list" @click="gotoDetails">
      <li class="van-hairline--bottom">
        <div class="list-content">
          <p>合计原借款：<span>0.00</span></p>
          <p>合计已冲账：<span>0.00</span></p>
        </div>
        <div class="list-content">
          <p>合计未还款：<span>0.00</span></p>
        </div>
      </li>
    </ul>
    <div class="no-data">没有更多了</div>
  </div>
  <tabBar :routeActive="2"></tabBar>
</template>


<script setup>
  import { ref } from 'vue'
  import tabBar from '@/h5/components/tabbar.vue';
  import { useRouter } from "vue-router";
  const router = useRouter();
  

  let active = ref(0)
  let tebList = ref([
    {
      name: '未提交',
      icon: 'icon-tubiao_tijiao',
    },
    {
      name: '审批中',
      icon: 'icon-shenpi',
    },
    {
      name: '未报账',
      icon: 'icon-baoxiao',
    },
    {
      name: '更多',
      icon: 'icon-gengduo',
    }
  ])

  const returnBtn = () => {
    router.push({path: '/'})
  };
  // let 
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #Fff;
}
.tabbar-tab {
  margin: .9375rem 0;
  padding: .9375rem 0;
}
.tab-bu {
  margin-top: .625rem;
  margin-left: .9375rem;
  & span {
    color: var(--van-danger-color);
  }
}
.list {
  margin: 0 .9375rem;
  overflow: hidden;
  margin-top: .9375rem;
  & li {
    padding: 15px 0;
    .list-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      & p {
        & span {
          color: #ece801;
        }
      }
      
    }
  }
  
}
.no-data {
  text-align: center;
  margin: .625rem 0;
}
</style>

